<template>
  <div class="cinema">
    <film-header></film-header>
    <div class="text">
        <p>
          <ul>
            <li>
              <a href="#">全城</a>
              <i class="fa fa-caret-down"></i>
            </li>
            <li>
              <a href="#">品牌</a>
              <i class="fa fa-caret-down"></i>
            </li>
            <li>
              <a href="#">特色</a>
              <i class="fa fa-caret-down"></i>
            </li>
          </ul>
        </p>
        <div class="address" v-for="item in address" :key="item.index">
           <p>
             <span>{{item.cinema}}</span>
             <span>{{item.price}}</span>
             <span>元起</span>
           </p>
           <p>
             <span>{{item.address}}</span>
             <span>&gt;{{item.distance}}km</span>
           </p>
           <p>
             <span>小吃</span>
             <span>折扣卡</span>
           </p>
        </div>
    </div> 
    <film-footer></film-footer>
  </div>
</template>

<script>
import FilmHeader from '../components/filmHeader.vue'
import FilmFooter from '../components/filmFooter.vue'
export default {
  name:'my-cinema',
  components: {
    FilmHeader,FilmFooter
  },
  data(){
    return{
      address:[
        {
          cinema:"大地影院延庆金锣湾店",
          price:38.5,
          address:'延庆区北街39号H座首层',
          distance:100
        },
        {
          cinema:"燕山影剧院",
          price:37.5,
          address:'房山区燕山岗南路3号',
          distance:120
        },
        {
          cinema:"万达影城昌平保利光魔店",
          price:37.9,
          address:'昌平区鼓楼南街佳莲时代广场四层',
          distance:80
        },
        {
          cinema:"门头沟影剧院",
          price:30.9,
          address:'门头沟区新桥大街12号',
          distance:110
        }
      ]
    }
  }
}
</script>

<style scoped>
  .cinema .text{
    margin-top:50px;
  }
  .cinema .text>p ul{
    display:flex;
    justify-content:space-around
  }
  .cinema .text>p ul li a{
    color:black;
  }
  .cinema .text>p{
    width:100%;
    height:50px;
    border-bottom:1px solid rgba(152, 150, 150,0.5);
    line-height:50px;
    font-weight:bold;
  }
  .address{
    width:100%;
    height:110px;
    border-bottom:1px solid rgba(152, 150, 150,0.5);
  }
  .address>p{
    margin:10px;
  }
  .address p:nth-of-type(1) span:nth-of-type(1){
    font-size:18px;
    font-weight:bold;
  }
  .address p:nth-of-type(1) span:nth-of-type(2){
    font-size:20px;
    color:#e54847;
    display:inline-block;
    margin-left:10px;
  }
  .address p:nth-of-type(1) span:nth-of-type(3){
    color:#e54847;
    font-size:14px;
  }
   .address p:nth-of-type(2){
    display: flex;
    justify-content:space-between;
    color:rgba(54, 54, 54,0.8);
  }
  .address p:nth-of-type(2) span:nth-of-type(1){
    font-size:14px;
  }
  .address p:nth-of-type(3) span{
    display:inline-block;
    border:1px solid #f90;
    color:#f90;
    border-radius: 2px;
  }
</style>